<template>
    <a-card id="kf-ft" :body-style="{ padding: '5px' }">
        <a-row>
            <a-col :span="21">
                <a-tabs type="card" @change="callback" tab-position="bottom">
                    <a-tab-pane key="1" tab="标准">
                        <rooms ref="rooms" />
                    </a-tab-pane>
                    <a-tab-pane key="2" tab="矛盾房">
                        <rooms />
                    </a-tab-pane>
                    <a-tab-pane key="3" tab="叫早">
                        <rooms />
                    </a-tab-pane>
                    <a-tab-pane key="4" tab="钟点房">
                        <rooms />
                    </a-tab-pane>
                </a-tabs>
                <a-divider />
                <example />
            </a-col>
            <a-col :span="3">
                <div class="rightCol">
                    <a-button type="primary" @click="searchQuery" style="margin: 20px 0 ;">
                        <a-icon type="reload" />
                        刷新房态
                    </a-button>
                    <a-button type="primary" @click="changeFullScreen">
                        <a-icon :type="screenfullTag ? 'fullscreen-exit' : 'fullscreen'" />
                        <span v-if="screenfullTag">
                            退出全屏
                        </span>
                        <span v-else>
                            全屏
                        </span>
                    </a-button>
                    <a-divider />
                    <roomType style="width: 100%;" @changeType="changeType" />
                    <a-divider />
                    <roomFloor style="width: 100%;" @changeFloor="changeFloor" />
                </div>
            </a-col>
        </a-row>
    </a-card>
</template>

<script>
import screenfull from 'screenfull'
import rooms from './rooms'
import example from './example'
import roomFloor from './roomFloor'
import roomType from './roomType'

export default {
    name: 'FT',
    components: {
        rooms,
        example,
        roomFloor,
        roomType
    },
    data() {
        return {
            screenfullTag: false,
        }
    },
    methods: {
        changeFullScreen() {
            let el = document.getElementById('kf-ft')
            if (!screenfull.isEnabled) {
                return false
            }
            this.screenfullTag = !this.screenfullTag
            screenfull.toggle(el)
        },
        callback() { },
        searchQuery() {
            this.$refs.rooms.searchQuery();
        },
        changeType(type) {
            this.$refs.rooms.changeParam('type', type)
        },
        changeFloor(floor) {
            this.$refs.rooms.changeParam('floor', floor)
        }
    }
}
</script>

<style scoped>
.rightCol {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border: 1px solid grey;
}
</style>